<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>会员统计</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>会员管理
            <small>会员统计</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>会员管理</el-breadcrumb-item>
            <el-breadcrumb-item>会员统计</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <el-button @click="memberCountOfYear()" type="success" round>会员总量</el-button>
            <el-dropdown size="medium" split-button type="warning" @click="orderCountOfYear()">
                会员预约总量
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <el-button @click="orderCountOfMonth()" type="success" round plain>本月预约量</el-button>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span display="show" >{{total}}</span>

            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart" style="height:450px;"></div>

        </div>
    </div>
</div>
</body>
<<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            show:"hidden", //设置表单某项不能修改
            total:""
        },
        //钩子函数，VUE对象初始化完成后自动执行
        mounted() {
            // 页面加载完成后,会显示会员总量变化图
            this. memberCountOfYear()
        },
        methods: {
            // 用于统计图显示当前时间的方法
            getDate() {
                var today = new Date();
                // console.log(today):  Wed Jul 17 2019 17:48:53 GMT+0800 (中国标准时间)
                var date = today.toLocaleString().replace();
                // console.log(today.toLocaleString()):  2019/7/17 下午5:48:53
                return date;
            },
            // 显示会员总量的折线图
            memberCountOfYear() {
                // 基于准备好的dom，初始化echarts实例
                var myChart1 = echarts.init(document.getElementById('chart'));
                myChart1.dispose();
                var myChart = echarts.init(document.getElementById('chart'));
                // 使用刚指定的配置项和数据显示图表。
                //myChart.setOption(option);
                axios.get("/report/getMemberReport.do").then((res) => {
                    // 1.如果返回的result的flag为true,则动态展示折现统计图
                    if (res.data.flag) {
                        myChart.setOption(
                            {
                                title: {
                                    text: '会员数量变化图'
                                },
                                tooltip: {},
                                legend: {
                                    data: ['会员数量']
                                },
                                xAxis: {
                                    data: res.data.data.months
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '会员数量',
                                    type: 'line',
                                    data: res.data.data.memberCount
                                }]
                            });
                    } else {
                        // 2.如果flag为false,则给出获取会员统计失败提示
                        this.$message.error(res.data.message)
                    }
                });
            },

            //显示会员预约总量的折线图
            orderCountOfYear() {
                // 基于准备好的dom，初始化echarts实例
                var myChart1 = echarts.init(document.getElementById('chart'));
                myChart1.dispose();
                var myChart = echarts.init(document.getElementById('chart'));
                // 使用刚指定的配置项和数据显示图表。
                //myChart.setOption(option);
                axios.get("/report/getMemberOrderReport.do").then((res) => {
                    // 1.如果返回的result的flag为true,则动态展示折现统计图
                    if (res.data.flag) {
                        myChart.setOption(
                            {
                                title: {
                                    text: '预约人数变化图'
                                },
                                tooltip: {},
                                legend: {
                                    data: ['预约人数',"预约已到诊数"]
                                },
                                xAxis: {
                                    data: res.data.data.months
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '预约人数',
                                    type: 'line',
                                    data: res.data.data.memberOrderCount
                                },
                                    {
                                        name: '预约已到诊数',
                                        type: 'line',
                                        data: res.data.data.memberOrderCountFinished
                                    }]
                            });
                    } else {
                        // 2.如果flag为false,则给出获取会员统计失败提示
                        this.$message.error(res.data.message)
                    }
                });
            },

            //显示本月会员预约量变化柱状图
            orderCountOfMonth() {
                // 基于准备好的dom，初始化echarts实例
                var myChart1 = echarts.init(document.getElementById('chart'));
                myChart1.dispose();
                var myChart = echarts.init(document.getElementById('chart'));
                // 使用刚指定的配置项和数据显示图表。
                //myChart.setOption(option);
                axios.get("/report/getMemberOrderReportMonth.do")
                    .then((res) => {
                        if (res.data.flag) {
                            var dataShadow = [];
                            // Enable data zoom when user click bar.
                            var zoomSize = 6;
                            myChart.on('click', function (params) {
                                console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                                myChart.dispatchAction({
                                    type: 'dataZoom',
                                    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                                    endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                                });
                            });
                            myChart.setOption({
                                title: {
                                    text: '本月会员预约数量',
                                    subtext: '统计截止时间:  ' + this.getDate()
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                xAxis: {
                                    data: res.data.data.days,
                                    axisLabel: {
                                        inside: false,
                                        textStyle: {
                                            color: '#67C23A'
                                        }
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLine: {
                                        show: false
                                    },
                                    z: 10
                                },
                                yAxis: {
                                    axisLine: {
                                        show: false
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        textStyle: {
                                            color: '#99'
                                        }
                                    }
                                },
                                dataZoom: [
                                    {
                                        type: 'inside'
                                    }
                                ],
                                series: [
                                    { // For shadow
                                        type: 'bar',
                                        itemStyle: {
                                            color: 'rgba(0,0,0,0.05)'
                                        },
                                        barGap: '-100%',
                                        barCategoryGap: '40%',
                                        data: [],
                                        animation: false
                                    },
                                    {
                                        type: 'bar',
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(
                                                0, 0, 0, 1,
                                                [
                                                    {offset: 0, color: '#83bff6'},
                                                    {offset: 0.5, color: '#188df0'},
                                                    {offset: 1, color: '#188df0'}
                                                ]
                                            )
                                        },
                                        emphasis: {
                                            itemStyle: {
                                                color: new echarts.graphic.LinearGradient(
                                                    0, 0, 0, 1,
                                                    [
                                                        {offset: 0, color: '#2378f7'},
                                                        {offset: 0.7, color: '#2378f7'},
                                                        {offset: 1, color: '#83bff6'}
                                                    ]
                                                )
                                            }
                                        },
                                        name: '已到诊',
                                        data: res.data.data.memberOrderCount
                                    }
                                ]
                            });
                            // 在现实本月已到诊会员总量,通过data中的orderAlreadTotal
                            this.total=res.data.data.orderAlreadTotal

                        } else {
                            // 2.如果flag为false,则给出获取会员统计失败提示
                            this.$message.error(res.data.message)
                        }
                    });

            }


        }

    })
</script>
</html>
